<template>
  <div class="table">
    <el-table  empty-text=" " :row-class-name="tableRowClassName" :data="tb" border :height='height' @cell-click='cellClick' style="width: 100%">
      <!-- <el-table-column :type="expand" v-if='tableTitle === "tb_005"'>
            <template slot-scope="scope">
                <el-form label-position="left"  inline class="demo-table-expand" label-width="100px">
                    <el-form-item v-show="index!==t.length-1" :label="item.title+':'" v-for="(item,index) in t" :key='index'>
                    <span>{{ scope.row[item.prop] }}</span>
                    </el-form-item>
                </el-form>
            </template>
        </el-table-column> -->
      <el-table-column v-for="(item,index) in t" :key='index' :render-header="(h)=>{return [h('span', {}, [item.title]), h('br', {}, ['']), h('span', {}, [item.unit])]}" align="center" :width="item.width">
        <template slot-scope="scope">
          <!-- ------------------------------------------------------------------------------------------ -->
          <span v-if="item.prop==='sumFees' && tableTitle === 'tb_001'" :class="scope.row.feesType === 'UP'?'up':'down'">
            {{scope.row[item.prop]|noData}}
            <i class='el-icon-sort-up' v-if="scope.row.feesType === 'UP'"></i>
            <i class='el-icon-sort-down' v-else></i>
          </span>
          <!-- ------------------------------------------------------------------------------------------ -->
          <span v-else-if="item.operation" class='details_editor'>
            <el-button @click='editor(scope.row,item.operation[0])' v-if="item.operation[0]" type="success" size='mini'>详情</el-button>
            <el-button @click='editor(scope.row,item.operation[1])' v-if="item.operation[1]" type="warning" size='mini'>编辑</el-button>
            <el-button @click='Delete(scope.row,item.operation[2])' v-if="item.operation[2]" type="danger" size='mini'>删除</el-button>
          </span>
          <!-- ------------------------------------------------------------------------------------------ -->
          <span v-else-if="item.prop==='countDimensions' && tableTitle === 'tb_0013'">
            <span>{{scope.row[item.prop].substr(0,10)|noData}}
              <br>
              {{scope.row[item.prop].substr(20,10)|noData}}
              <br>
            </span>
          </span>
          <!-- ------------------------------------------------------------------------------------------ -->
          <span v-else-if="item.prop==='lastTime'&&tableTitle === 'tb_0011'">
            {{scope.row[item.prop]|hoursMinutes}}
          </span>
          <!-- ------------------------------------------------------------------------------------------ -->
          <span v-else-if="item.prop==='timeLength'&&tableTitle === 'tb_0012'">
            {{scope.row[item.prop]|hoursMinutes}}
          </span>
          <!-- ------------------------------------------------------------------------------------------ -->
          <span v-else-if="item.prop==='accumulateTime'&&tableTitle === 'tb_002'">
            {{scope.row[item.prop]|hoursMinutes}}
          </span>
          <!-- ------------------------------------------------------------------------------------------ -->
          <span v-else>
            {{scope.row[item.prop]|noData}}
          </span>
          <!-- ------------------------------------------------------------------------------------------ -->
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import './table.scss'
export default {
  components: {

  },
  props: {
    height: {
      type: String,
      default: null
    },
    expand: {
      type: String,
      default: 'expand'
    },
    tableTitle: {
      type: String,
      default: ''
    },
    tableData: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      // 用电账单_企业用电_table
      tb_001: [
        { 'title': '核算单元', 'unit': '', 'width': '', 'prop': 'accountingUnitName' },
        { 'title': '总用电量', 'unit': '(kWh)', 'width': '', 'prop': 'sumQuantity' },
        { 'title': '总电费', 'unit': '(元)', 'width': '', 'prop': 'sumFees' },
        { 'title': '尖电费', 'unit': '(元)', 'width': '', 'prop': 'sumTipFees' },
        { 'title': '峰电费', 'unit': '(元)', 'width': '', 'prop': 'sumPeakFees' },
        { 'title': '平电费', 'unit': '(元)', 'width': '', 'prop': 'sumFlatFees' },
        { 'title': '谷电费', 'unit': '(元)', 'width': '', 'prop': 'sumValleyFees' },
        { 'title': '损耗量', 'unit': '(kWh)', 'width': '', 'prop': 'wastageQuantity' },
        { 'title': '损耗率', 'unit': '(%)', 'width': '', 'prop': 'wastageRate' },
      ],
      // 负载率监视及预警_table
      tb_002: [
        { 'title': '配电室名称', 'unit': '', 'width': '', 'prop': 'roomName' },
        { 'title': '变压器名称', 'unit': '', 'width': '', 'prop': 'transName' },
        { 'title': '额定容量(kVA)', 'unit': '', 'width': '', 'prop': 'ratedCapacity' },
        { 'title': '当前功率(kW)', 'unit': '', 'width': '', 'prop': 'currentPower' },
        { 'title': '当前负载率', 'unit': '', 'width': '', 'prop': 'currentLoadRate' },
        { 'title': '负载率超90%累积发生时长', 'unit': '', 'width': '', 'prop': 'accumulateTime' },
        { 'title': '操作', 'unit': '', 'width': '80px', 'prop': '', 'operation': ['tb_002_details', 0, 0] },
      ],
      // 用电账单_车间用电——table
      tb_003: [
        { 'title': '统计日期', 'unit': '', 'width': '', 'prop': 'dateTime' },
        { 'title': '总用电量', 'unit': '(kWh)', 'width': '', 'prop': 'sumQuantity' },
        { 'title': '总电费', 'unit': '(元)', 'width': '', 'prop': 'sumFees' },
        { 'title': '尖用电量', 'unit': '(kWh)', 'width': '', 'prop': 'sumQuantity' },
        { 'title': '尖电费', 'unit': '(元)', 'width': '', 'prop': 'tipFees' },
        { 'title': '峰用电量', 'unit': '(kWh)', 'width': '', 'prop': 'sumQuantity' },
        { 'title': '峰电费', 'unit': '(元)', 'width': '', 'prop': 'peakFees' },
        { 'title': '平用电量', 'unit': '(kWh)', 'width': '', 'prop': 'flatQuantity' },
        { 'title': '平电费', 'unit': '(元)', 'width': '', 'prop': 'flatFees' },
        { 'title': '谷用电量', 'unit': '(kWh)', 'width': '', 'prop': 'valleyQuantity' },
        { 'title': '谷电费', 'unit': '(元)', 'width': '', 'prop': 'valleyFees' },
      ],
      // 产品数据统计table
      tb_004: [],
      // 生产数据管理table
      tb_005: [
        { 'title': '开始时间', 'unit': '', 'width': '', 'prop': 'startDate' },
        { 'title': '结束时间', 'unit': '', 'width': '', 'prop': 'endDate' },
        { 'title': '车间', 'unit': '', 'width': '', 'prop': 'workshopName' },
        { 'title': '生产线', 'unit': '', 'width': '', 'prop': 'lineName' },
        { 'title': '班组', 'unit': '', 'width': '', 'prop': 'teamName' },
        { 'title': '负责人', 'unit': '', 'width': '', 'prop': 'monitor' },
        { 'title': '产品名称', 'unit': '', 'width': '', 'prop': 'productName' },
        { 'title': '数量', 'unit': '', 'width': '', 'prop': 'number' },
        { 'title': '操作', 'unit': '', 'width': '150', 'prop': '', 'operation': [0, 'tb_005_editor', 'tb_005_delete'] },
      ],
      // 用能质量
      tb_006: [
        { 'title': '发生时间', 'unit': '', 'width': '200', 'prop': 'currentTime' },
        { 'title': '参数', 'unit': '', 'width': '150', 'prop': 'metricName' },
        { 'title': '提示值', 'unit': '', 'width': '', 'prop': 'metricNum' },
        { 'title': '说明', 'unit': '', 'width': '', 'prop': 'metricDescription' },
      ],
      // 能源采购管理
      tb_007: [
        { 'title': '编号', 'unit': '', 'width': '50', 'prop': 'index' },
        { 'title': '能源种类', 'unit': '', 'width': '80', 'prop': 'energyTypeDesc' },
        { 'title': '能源供应商', 'unit': '', 'width': '', 'prop': 'energyProvider' },
        { 'title': '投运时间', 'unit': '', 'width': '100', 'prop': 'transportationDates' },
        { 'title': '容量', 'unit': '', 'width': '', 'prop': 'a' },
        { 'title': '合同单价', 'unit': '', 'width': '110', 'prop': 'b' },
        // { 'title': '年度', 'unit': '', 'width': '70', 'prop': 'yearPeriod' },
        { 'title': '预计采购量', 'unit': '', 'width': '100', 'prop': 'c' },
        { 'title': '商务联系人', 'unit': '', 'width': '100', 'prop': 'businessPerson' },
        { 'title': '联系方式', 'unit': '', 'width': '110', 'prop': 'businessMobile' },
        { 'title': '技术联系人', 'unit': '', 'width': '100', 'prop': 'techPerson' },
        { 'title': '联系方式', 'unit': '', 'width': '110', 'prop': 'techMobile' },
        { 'title': '操作', 'unit': '', 'width': '80', 'prop': '', 'operation': [0, 'tb_005_editor', 0] },
      ],
      // 用汽账单_企业用汽——table
      tb_008: [
        { 'title': '核算单元', 'unit': '', 'width': '', 'prop': 'name' },
        { 'title': '总蒸汽量 (t)', 'unit': '', 'width': '', 'prop': 'steamAmount' },
        { 'title': '总蒸汽费用 (元)', 'unit': '', 'width': '', 'prop': 'steamMonth' },
      ],
      // 用汽账单_车间用汽——table-月
      tb_009: [
        { 'title': '统计日期', 'unit': '', 'width': '', 'prop': 'readTime' },
        { 'title': '总用汽量（t）', 'unit': '', 'width': '', 'prop': 'useQuantity' },
        { 'title': '总蒸汽费用（元）', 'unit': '', 'width': '', 'prop': 'fees' },
      ],
      // 用汽账单_车间用汽——table-月
      tb_0010: [
        { 'title': '统计日期', 'unit': '', 'width': '', 'prop': 'readTime' },
        { 'title': '总用汽量（t）', 'unit': '', 'width': '', 'prop': 'useQuantity' },
        { 'title': '总蒸汽费用（元）', 'unit': '', 'width': '', 'prop': 'fees' },
        { 'title': '上月同比（%）', 'unit': '', 'width': '', 'prop': 'lastMonthPercent' },
        { 'title': '同期环比（%）', 'unit': '', 'width': '', 'prop': 'samePeriodPercent' },
      ],
      // 异常告知管理 table
      tb_0011: [
        { 'title': '告知参数', 'unit': '', 'width': '', 'prop': 'metricName' },
        { 'title': '累积发生时长', 'unit': '', 'width': '', 'prop': 'lastTime' },
        { 'title': '超限时间占比', 'unit': '', 'width': '', 'prop': 'percert' },
        { 'title': '集中发生时间段', 'unit': '', 'width': '', 'prop': 'timePeriod' },
        { 'title': '操作', 'unit': '', 'width': '80', 'prop': '', 'operation': ['tb_0011_details', 0, 0] },
      ],
      // 异常告知管理  弹出框 table
      tb_0012: [
        { 'title': '持续发生5min以上时刻', 'unit': '', 'width': '170', 'prop': 'alarmCurrentTime' },
        { 'title': '恢复时间', 'unit': '', 'width': '170', 'prop': 'recoveryTime' },
        { 'title': '持续时间', 'unit': '', 'width': '110', 'prop': 'timeLength' },
        { 'title': '告警内容', 'unit': '', 'width': '', 'prop': 'content' },
      ],
      // 产品单耗分析 02 table
      tb_0013: [
        { 'title': '统计维度', 'unit': '', 'width': '', 'prop': 'countDimensions' },
        { 'title': '综合能源费用', 'unit': '', 'width': '', 'prop': 'sumEnergyFees' },
        { 'title': '总用电量', 'unit': '（kWh）', 'width': '', 'prop': 'countElectricity' },
        { 'title': '总电费', 'unit': '（元）', 'width': '', 'prop': 'countElectricityFees' },
        { 'title': '总蒸汽量', 'unit': '（t）', 'width': '', 'prop': 'countSteam' },
        { 'title': '总蒸汽费用', 'unit': '（元）', 'width': '', 'prop': 'countSteamFees' },
        { 'title': '生产产量', 'unit': '（t）', 'width': '', 'prop': 'produceNumber' },
        { 'title': '生产单耗（电）', 'unit': '（kWh/t）', 'width': '150', 'prop': 'produceConsumptionElectricity' },
        { 'title': '生产单耗（蒸汽）', 'unit': '（kWh/t）', 'width': '150', 'prop': 'produceConsumptionSteam' },

      ],
      // 看板
      tb_0014: [
        { 'title': '排名', 'unit': '', 'width': '50', 'prop': '' },
        { 'title': '车间名称', 'unit': '', 'width': '', 'prop': 'sumEnergyFees' },
        { 'title': '用电量（kWh）', 'unit': '', 'width': '', 'prop': 'countElectricity' },
        { 'title': '蒸汽用量（t）', 'unit': '', 'width': '', 'prop': 'countElectricityFees' },
      ],
        // 运行监视
      tb_0015: [
        { 'title': '设备', 'unit': '', 'width': '', 'prop': '' },
        { 'title': '工况', 'unit': '', 'width': '', 'prop': '' },
        { 'title': '平均负载率', 'unit': '', 'width': '', 'prop': '' },
        { 'title': '最大负载率', 'unit': '', 'width': '', 'prop': '' },
      ],
    }
  },
  computed: {
    tb() {
      return this.tableData
    },
    t() {
      return this[this.tableTitle]
    }
  },
  mounted() {
  },
  created() { },
  methods: {
    cellClick(row, column, cell, event) {
      console.log(row)
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.type === '03') {
        return 'active_row_x'
      } else if (row.type === '02') {
        return 'active_row';
      }
      else if (
        row.type === '01'
      ) {
        return 'active_row_m'
      } else {
        return '';
      }
      return '';
    },
    details(p, async) {
      // alert(async)
      this.$emit(async, p)
    },
    editor(p, async) {
      this.$emit(async, p)
    },
    Delete(p, async) {
      this.$emit(async, p)
    }
  }
};
</script>
 <style scoped lang='scss'>
.details_editor {
  display: flex;
  justify-content: center;
  i {
    // padding: 0px 10px;
    font-style: normal;
    display: inline-block;
    //  width: 50px;
    color: #0780ed;
    cursor: pointer;
  }
}
.table {
  width: 100%;
  height: 100%;
}
.up {
  width: 100px;
  display: inline-block;
  color: green;
  i {
    float: right;
    font-size: 20px;
  }
}
.down {
  width: 115px;
  display: inline-block;
  color: red;
  i {
    float: right;
    font-size: 20px;
  }
}
</style>
